<template>
    <el-container class="mainContainer">
        <!-- 头部 -->
        <el-header style="">
            <!-- logo 部分 -->
            <div class="logo">
                <img src="../../images/logo3.png" alt="">
            </div>
        </el-header>
        <!--  -->
        <el-container>
            <!-- 左侧菜单栏 -->
            <el-aside style="width:220px;background-color: rgb(209,140,145)">
                <el-row class="tac">
                    <el-col :span="24">
                        <!-- 用户信息 -->
                        <div class="buttomUserInfo">
                            <el-dropdown placement="right" style="width:100%">
                                <div>
                                    <div class="userInfoDiv">
                                        <img src="../../images/woman.png" alt="" v-if="userImg == 1">
                                        <img src="../../images/man.png" alt="" v-else>
                                    </div>
                                    &nbsp;&nbsp;<span class="userName">{{userName}}</span>
                                </div>
                                
                                <el-dropdown-menu >
                                    <!-- <el-dropdown-item @click.native="updatePwd">修改密码</el-dropdown-item>
                                    <el-dropdown-item @click.native="changeRole">变更角色</el-dropdown-item> -->
                                    <el-dropdown-item @click.native="toUserInfo">个人中心</el-dropdown-item>
                                    <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <!-- 动态导航加载 -->
                        <div class="topMenuDiv">
                            <el-menu :default-active="activeMenu"   class="el-menu-vertical-demo" router 
                            background-color="#D18C91" text-color="#fff" active-text-color="#fff">
                                <template v-for="item in menuList">
                                    <el-submenu :index="item.url" :key="item.menuId" v-if="item.secMenu && item.secMenu.length">
                                        <template slot="title">
                                            <i :class="item.icon"></i>
                                            <span>{{item.name}}</span>
                                        </template>
                                        <el-menu-item-group >
                                            <el-menu-item  :index="todo.url"  v-for="todo in item.secMenu" :key="todo.menuId">{{todo.name}}</el-menu-item>
                                        </el-menu-item-group>
                                    </el-submenu>
                    
                                    <el-menu-item :index="item.url" :key="item.menuId"  v-else-if="!item.secMenu.length">
                                        <i :class="item.icon"></i>
                                        <span slot="title">{{item.name}}</span>
                                    </el-menu-item>
                                </template>
                                
                            </el-menu>
                        </div>
                        
                    </el-col>
                </el-row>
            </el-aside>

            <!-- 中间主体部分 -->
            <el-main>
                <!-- <div class="tags">
                    <el-tag  v-for="(tag,index) in tags" :key="tag.name" closable :type="tag.type" @close="closeTag(index)">
                        {{tag.name}}
                    </el-tag>
                </div> -->
                <router-view></router-view>
            </el-main>

            
        </el-container>
    </el-container>

</template>

<script>
export default {
    data(){
        
        return{
            activeMenu:"", // 选中菜单
            userImg:2,
            userName:"阿狸", // 用户名称
            userInfo:"", // 存用户信息
            tags: [],
            menuList:[],
        }
    },
    created(){
        // 监听路由
        this.activeMenu = this.$route.path
        this.getUserInfo()
        // 获取所有菜单数据
        this.menuList = this.$common.menuFormat(this.userInfo.menuList)
        // 1：女 2：男
        this.userImg = (this.userInfo.sex == 1)?1:2
    },
    mounted(){},
    updated(){
        this.getUserInfo()
    },
    methods:{
        // 登出
        logOut(){
            this.$api.loginOut()
            .then(result => {
                this.$router.push('/login')
            })
            .catch(err => {
                this.$router.push('/login')
            })
        },
        
        // 获取登陆用户信息
        getUserInfo(){
            // this.userName = localStorage.userInfo?JSON.parse(localStorage.userInfo).userName.split("")[0]:this.userName
            this.userName = localStorage.userInfo?JSON.parse(localStorage.userInfo).userName:this.userName
            this.userInfo = localStorage.userInfo?JSON.parse(localStorage.userInfo):""
            if(this.userInfo.roles.length > 0 ){
                var _this = this
                _this.userInfo.roleId = []
                _this.userInfo.roleName = []
                _this.userInfo.auth = []
                _this.userInfo.menuList = []
                this.userInfo.roles.forEach(e => {
                    _this.userInfo.roleName.push(e.name)
                    _this.userInfo.roleId.push(e.id)
                    if(e.authority.length > 0){
                        e.authority.forEach(el => {
                            _this.userInfo.auth.push(el.name)
                            if(el.menuList && el.menuList.length>0){
                                _this.userInfo.menuList = el.menuList
                            }
                        })
                    }
                })
            }
        },
        // 关闭标签
        closeTag(index){
          this.tags.splice(index,1)
        },
        toUserInfo(){
            this.$router.push({
                path: '/userInfo'
            })
        },
    },
    watch:{
        $route(to,from){ // 监听路由的变化 切换导航的选中值
            this.activeMenu = to.path
        }
    },
}
</script>

<style lang="scss" scoped>
// @import '../../css/common.css';
$color1:#78383C;
$color2:#fff;
$cursor: #fff;
.mainContainer{
    // position: relative;
    // position: fixed;
    background: url('../../images/bg.png') center/cover no-repeat;
}
.el-container{
    // margin-top: 60px;
    height: 100%;
    .el-header{
        // position: fixed;
        // margin-top:0;
        display: flex;
        width: 100%;
        height: 60px;
        padding: 0;
        padding-right: 30px;
        line-height: 60px;
        text-align: right;
        justify-content:space-between;
        // box-shadow: 0 1px 4px rgba(0,21,41,0.08);
        .logo{
            width: 30%;
            height: 100%;
            img{
                width:100%;
                height: 100%;
            }
        }
        span{
            display: inline-block;
            font-size: 18px;
            font-weight: bold;
            color: $color1;
            // margin-right: 30px;
            cursor: pointer;
            i{
                margin-right: 5px;
            }
        }
        .editUserInfo{
            position: absolute;
            right: 10px;
            top:60px;
            padding-top: 20px;
            padding-bottom: 30px;
            text-align: center;
            color: #fff;
            background: rgba(208,139,144,0.9);
            border-radius: 10px;
            .edit,.dropOut{
                width: 33%;
                height: 30px;
                line-height: 25px;
                border-radius: 15px;
                color: #fff;
                >span{
                    font-size: 14px;
                    font-weight: normal; 
                }
            }
        }
    }
    .tac,.el-col{
        height: 100%;
    }
    .topMenuDiv{
        position: absolute;
        top: 11%;
        width: 100%;
        height: 89%;
    }
    .buttomUserInfo{
        // position: fixed;
        // margin-top: 0;
        z-index: 9;
        width: 100%;
        height: 10%;
        color: #fff;
        border-bottom:1px solid #F2EEED;
        background: #D18C91;
        .el-dropdown{
            height: 100%;
        }
        .el-dropdown-selfdefine{
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;
        }
        .userInfoDiv{
            width: 30%;
            height: 70%;
            img{
                width:100%;
                height: 100%;
            }
        }
        span{
            color: #fff;
            &.userName{
                font-size: 22px;
                cursor: pointer;
            }
        }
        
        span.el-dropdown-link{
            display: inline-block;
            width:65px;
            height: 65px;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            // font-weight: bold;
            color: #fff;
            background: #AD484D;
            border-radius: 50%;
            cursor: pointer;
            
        }
        .el-dropdown-menu{
            text-align: center
        }
        .el-dropdown-menu .el-dropdown-item:hover{
            color: #78383C !important;
        }
    }

    .el-menu{
        i{
            color: $color2
        }
        .el-menu-item.is-active{
            background: #78383C !important;
            // color: #fff;
            // background: transparent
        }
        .el-menu-item.is-active i{
            color: $color2
        }
        
    }
    .el-main{
        padding:0;
        // background: url('../../images/bg.png') center/cover no-repeat;
        .tags{
            padding:5px 10px;
            background:rgba(204,204,204, 0.2);
            .el-tag{
                cursor: pointer;
            }
        }
        
    }
}

</style>